<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      header {
        width: 100%;
        height: 100px;
        background-color: lightcoral;
        position: sticky;
        top: 0;
      }
      main {
        width: 1020px;
        margin: 0 auto;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <header>第一章：出师北伐</header>
    <main>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
      <h1>17</h1>
      <h1>18</h1>
      <h1>19</h1>
      <h1>20</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
    </main>
    <header>第九十九章：北美也是北</header>
    <main>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
      <h1>17</h1>
      <h1>18</h1>
      <h1>19</h1>
      <h1>20</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
    </main>
  </body>
</html>

<!-- 
  粘性定位

    position: sticky;	粘性定位	是相对定位和固定定位的集合体，可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好

    当粘性定位的元素没有移出去的时候，相当于是相对定位
    当移出去的时候，相当于是固定定位
 -->
